<template>
  <dys-table
    :columns="columns"
    :data-source="state.list"
    :loading="state.loading"
    :hide-right-tool="!valueSetId"
    :pagination="false"
    :scroll="{ y: 'calc(100vh - 261px)' }"
    @reload="reload"
  >
    <template v-if="!!valueSetId" #extraLeft>
      <a-button type="primary" @click="handleAdd">
        <PlusCircleOutlined />
        {{ t("新增") }}
      </a-button>
    </template>
    <template #bodyCell="{ column, index, record, text }">
      <template
        v-if="
          editRecord &&
          (editRecord?.valueId == record.valueId ||
            (!editRecord?.valueId && !index))
        "
      >
        <a-form-item v-if="column.dataIndex == 'valueName'">
          <a-input
            v-model:value="editRecord.valueName"
            :placeholder="t('请输入值名称')"
            allow-clear
          ></a-input>
        </a-form-item>
        <a-form-item v-else-if="column.dataIndex == 'valueCode'">
          <a-input
            v-model:value="editRecord.valueCode"
            :placeholder="t('Please enter the value code')"
            @change="editRecord.valueCode = editRecord.valueCode.toUpperCase()"
            allow-clear
          ></a-input>
        </a-form-item>
        <a-form-item v-else-if="column.dataIndex == 'valueStatus'">
          <a-switch
            v-model:checked="editRecord.valueStatus"
            checked-value="Y"
            un-checked-value="N"
            :checked-children="t('有效')"
            :un-checked-children="t('无效')"
          ></a-switch>
        </a-form-item>
        <template v-else-if="column.dataIndex == 'operation'">
          <a-button type="link" size="small" @click="handleSave">
            {{ t("保存") }}
          </a-button>
          <a-button type="link" size="small" @click="handleCancel(record)">
            {{ t("取消") }}
          </a-button>
        </template>
      </template>
      <template v-else>
        <status-tag
          v-if="column.dataIndex == 'valueStatus'"
          :value="text"
        ></status-tag>
        <template v-else-if="column.dataIndex == 'operation'">
          <a-button type="link" size="small" @click="handleEdit(record)">
            {{ t("编辑") }}
          </a-button>
          <a-button
            type="link"
            size="small"
            @click="handleDelete(record)"
            danger
          >
            {{ t("删除") }}
          </a-button>
        </template>
      </template>
    </template>
  </dys-table>
</template>
<script lang="ts" setup>
import { cloneDeep } from "lodash";
import { useI18n } from "vue-i18n";
import { message } from "ant-design-vue";
import { reactive, ref, watch } from "vue";
import { useFetchList } from "@/hook/useFetchList";
import {
  addValue,
  delValue,
  queryValueByList,
  updateValue,
} from "@/api/system/value-set";
import type { TableColumnsType } from "ant-design-vue";
import type {
  QueryValueParams,
  QueryValueResult,
  ValueParams,
} from "@/api/system/value-set/typing";
import StatusTag from "@/components/status-tag/index.vue";
interface Props {
  /**值集ID */
  valueSetId: string;
}
const props = defineProps<Props>();
const { t } = useI18n();
const columns = reactive<TableColumnsType>([
  { title: () => t("值名称"), dataIndex: "valueName", width: 300 },
  { title: () => t("值编码"), dataIndex: "valueCode", width: 300 },
  { title: () => t("值状态"), dataIndex: "valueStatus", width: 100 },
  { title: () => t("操作"), dataIndex: "operation", width: 120 },
]);
const params = reactive<QueryValueParams>({ valueSetId: props.valueSetId });
const { state, reload } = useFetchList(queryValueByList, {
  params,
  autoFetch: false,
});
/**新增默认数据 */
const initValue = (): ValueParams => ({
  valueId: null,
  valueSetId: props.valueSetId,
  valueName: null,
  valueCode: null,
  valueStatus: "Y",
});
const editRecord = ref<ValueParams>();
defineExpose({ editRecord });
/**新增 */
const handleAdd = () => {
  if (editRecord.value) {
    return message.warning(t("请先保存正在编辑的行"));
  }
  editRecord.value = initValue();
  state.list.unshift(editRecord.value as QueryValueResult);
};
/**修改 */
const handleEdit = (record: QueryValueResult) => {
  if (editRecord.value) {
    return message.warning(t("请先保存正在编辑的行"));
  }
  editRecord.value = cloneDeep(record);
};
/**删除 */
const handleDelete = async (record: QueryValueResult) => {
  state.loading = true;
  const { success } = await delValue({ valueId: record.valueId });
  state.loading = false;
  if (success) {
    message.success(t("删除成功"));
    reload();
  }
};
/**保存 */
const handleSave = async () => {
  state.loading = true;
  const { success } = await (editRecord.value.valueId ? updateValue : addValue)(
    editRecord.value
  );
  state.loading = false;
  if (success) {
    message.success(t(editRecord.value.valueId ? "修改成功" : "新增成功"));
    reload();
    editRecord.value = null;
  }
};
/**取消 */
const handleCancel = (record: QueryValueResult) => {
  if (!record.valueId) {
    state.list.shift();
  }
  editRecord.value = null;
};
watch(
  () => props.valueSetId,
  (id) => {
    editRecord.value = null;
    if (id) {
      params.valueSetId = id;
      reload();
    } else {
      state.list = [];
    }
  },
  { immediate: true }
);
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
